<template>
	<view class="edit-delete-other-container">
		<view class="select-item-container">
			<view :class="['select-item', {'show-red': item.showRed}]" v-for="(item, index) in selectList" :key="index" @click="select(item, index, item.name)">
				{{item.name}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			selectList: {
				type: Array,
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			/** 点击事件
			 * @param {Object} item 点击的对象
			 * @param {Object} index 索引
			 */
			select(item, index, name) {
				if (name == "编辑") {
					this.$emit("editOperate");
				}else if (name == "删除") {
					this.$emit("deleteOperate", item, index);
				}
			},
		}
	}
</script>

<style lang="scss">
	.edit-delete-other-container {
		width: 120rpx;
		min-height: 100rpx;
		background-color: white;
		border-radius: 10rpx;
		/*  显示选择的时间 */
		.select-item-container {
			top: 12%;
			right: 30rpx;
			width: 120rpx;
			// padding: 10rpx;
			font-size: 24rpx;
			border: 1rpx solid $themePurpleColor;
			color: #a2a2a2;
			border-radius: 10rpx;
			
			.select-item {
				width: 100%;
				text-align: center;
				height: 70rpx;
				line-height: 70rpx;
				border-bottom: 1rpx solid #ccc;
			}
			
			.select-item:active {
				background-color: $themeBgcLightGreyColor;
				border-radius: 10rpx;
			}
			
			/* 最后一个不要下边框 */
			.select-item:last-child {
				border-bottom: 0rpx;
			}
			
			.show-red {
				color: $typefaceRedColor;
			}
		}
	}
</style>
